<template>
	<view>
		<view class="libTab" :class="[isNViewFlag ? 'setTopCls' : '',isHasFixedFlag ? 'hasFixed' : 'notFixed']">
			<view class="innerTab">
				<view class="tabItem"
					:class="[tabIndex == index ? 'active' : '']"
					v-for="(item,index) in tabArr"
					:key="index"
					@tap="switchTabType(index)"
				>{{item.typeName}}<view class="bgView"></view></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			tabArr: {
			    type: Array,
			    default() {return []; }
			},
			tabIndex: {
			    type: Number,
			    default() {
			        return 0;
			    }
			},
			isNViewFlag:{
				type:Boolean,
				default:false
			},
			isHasFixedFlag:{
				type:Boolean,
				default:true
			}
		},
		data(){
			return{
				
			}
		},
		methods:{
			switchTabType(index){
				this.$emit('update:tabCur', index);
				this.$emit('change', index);
			}
		}
	}
</script>

<style lang='scss' scoped>
	.libTab{
		width: 100%;
		height: 100rpx;
		background: #fff;
		z-index: 10; 
		.innerTab{
			padding: 0 30rpx;
			display: flex;
			.tabItem{
				position: relative;
				height: 100rpx;
				line-height: 100rpx;
				/* padding: 0 50rpx; */
				font-size: $font-size30;
				color: $pss-text-color8;
				margin-right: 80rpx;
				.bgView{
					width: 100%;
					height: 16rpx;
					/* background: #cbf3ea; */
					background: #ffeed2;
					filter: blur(2px);
					position: absolute;
					left: 0;
					bottom: 28rpx;
					z-index: -1;
					display: none;
				}
				&.active{
					font-size: $font-size34;
					color:$pss-color-primary_1;
					font-weight: bold;
					.bgView{
						display: block;
					}
				}
			}
		}
		&.setTopCls{
			top: var(--status-bar-height) !important;
		}
		&.notFixed{
			position: relative;
		}
		&.hasFixed{
			position: fixed;
			left: 0;
			top:0;
		}
	}
</style>